<!--项目库 列表组件 - modeA 图文列表-->
<template>
  <div class="list-wrap">
    <el-checkbox-group v-model="checkBoxList">
    <div v-for="(item, index) in listData" :key="index" class="list-a">
      <el-checkbox class="list-checkbox" :label="item">{{ }}</el-checkbox>
      <div class="mode-a">
        <div class="title">
          <h4>
            <p class="name">
              <span v-if="!defaultTrans" class="txt" @click="toDetail(item)" >
                {{index+1}}、
                <span v-if="item.pro_name_ori" v-html="replaceKeyword(item.pro_name_ori)"></span>
                <span v-else v-html="replaceKeyword(item.pro_name)"></span>
              </span>
              <span v-if="defaultTrans"  class="txt" @click="toDetail(item)" >
                {{index+1}}、
                <span v-if="item.pro_name" v-html="replaceKeyword(item.pro_name)"></span>
                <span v-else v-html="replaceKeyword(item.pro_name_ori)"></span>
              </span>
            </p>
          </h4>
        </div>
        <div class="list-main">
          <div class="right">
            <ul class="info">
              <li><span class="tit">承担机构：</span><span class="content" v-html="item.support_inst"></span></li>
              <li><span class="tit">项目金额：</span><span class="content" v-html="item.grants" ></span></li>
              <li><span class="tit">项目负责人：</span><span class="content" v-html="item.pro_leader" ></span></li>
              <li><span class="tit">学科分类：</span><span class="content" v-html="item.pro_type" ></span></li>
              <li><span class="tit">开始时间：</span><span class="content" v-html="item.begin_date" ></span></li>
              <li><span class="tit">资助机构：</span><span class="content" v-html="item.fund_inst" ></span></li>
              <li><span class="tit">来源：</span><span class="content" v-html="item.ori_link" ></span></li>
            </ul>
            <p v-if="!defaultTrans" class="abs ellipsis-4" >
              <span v-if="item.ab_ori" v-html="replaceKeyword(item.ab_ori)"></span>
              <span v-else v-html="replaceKeyword(item.ab_cn)"></span>
            </p>
            <p v-if="defaultTrans"  class="abs ellipsis-4">
              <span v-if="item.ab_cn" v-html="replaceKeyword(item.ab_cn)"></span>
              <span v-else v-html="replaceKeyword(item.ab_ori)"></span>
            </p>
          </div>
        </div>
      </div>
    </div>
    </el-checkbox-group>
    
    <!-- no-data -->
    <div v-if="noData" class="no-data">
      <loading1 :emptyText="emptyText"/>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {mapState} from 'vuex'
import {disassembleWord, wordsLight, isZh,replaceKeyword} from '@/utils/utils.js'
export default {
  props: {
    data: {
      type: Object
    },
    checkAllVal: {
      type: Boolean
    }
  },
  data() {
    return {
      listData: [],
      origListData: [], // 原始数据
      checkBoxList: [],
      noData: false,
      cancel: null,
      emptyText: ''
    }
  },
  mounted() {
    if (Object.keys(this.data).length > 0) {
      this.getListData(this.data)
    }
    this.$Bus.$on('emptyText', data => {
      this.emptyText = data
    })
    this.replaceKeyword = replaceKeyword
  },
  computed: {
    ...mapState(['searchWord', 'highlightKeyWords', 'highlightModeSettings', 'defaultTrans'])
  },
  methods: {
    getListData(data) {
      let result = data.result || []
      let list = []
      let origList = []
      result.forEach((v, index) => {
        if (v.abstract && v.abstract !== '') {
          let lastStr = v.abstract[v.abstract.length-1]
          let reg = /[.|。|？]/g
          if (!reg.test(lastStr)) {
            v.abstract += '...'
          }
        } else {
          v.abstract = '暂无内容'
        }
        
        let obj = {
          ...v,
          pro_name_ori: v.pro_name_ori || '-', // 项目名称
          pro_name: v.pro_name || '-', // 项目名称
          support_inst:v.support_inst || '-',// 承担机构
          grants:v.grants || '-',//经费
          begin_date:v.begin_date || '-', //项目时间
          ab_cn: v.ab_cn || '-', // 项目摘要
          fund_inst: v.fund_inst || '-', // 资助单位
          project_country: v.project_country || '-', //国家
          datasource:v.datasource || '-',//来源
          id:v.id,
        }
        origList.push(obj) // 原始数据
      })
      

      this.origListData = origList
      
      list = JSON.parse(JSON.stringify(origList))  // 高亮模式下的数据

      // 高亮模式
      let settings = []
      let open = this.highlightModeSettings.open
      // 默认关键词高亮样式
      let defObj = []
      if (this.highlightKeyWords.open) { // 如果是高级检索
        defObj = this.highlightKeyWords.modes
      } else { // 如果是智能检索
        let wordArr = disassembleWord(this.searchWord)
        defObj = wordArr
      }

      if (open) { // 如果开启高亮模式
        settings = [...defObj, ...this.highlightModeSettings.modes]
      } else {
        settings = [...defObj]
      }

      list.forEach(v => {
        v.title = wordsLight(v.title, settings)
        v.pro_name_ori = wordsLight(v.pro_name_ori, settings)
        v.pro_name = wordsLight(v.pro_name, settings)
        v.support_inst = wordsLight(v.support_inst, settings)
        v.grants = wordsLight(v.grants, settings)
        v.begin_date = wordsLight(v.begin_date, settings)
        v.ab_cn = wordsLight(v.ab_cn, settings)
        v.fund_inst = wordsLight(v.fund_inst, settings)
        v.project_country = wordsLight(v.project_country, settings)
        v.datasource = wordsLight(v.datasource, settings)
      })
      
      this.listData = list

      this.noData = origList.length <=0 ? true : false

    },
    // 跳转详情
    toDetail(item) {
      let detailLeftMenu = []
      this.origListData.forEach(v => {
        detailLeftMenu.push({
          id: v.id || '--', // 
          title: v.pro_name, // 标题
        })
      })
      localStorage.setItem('detailLeftMenu', JSON.stringify(detailLeftMenu))
      this.$nextTick(() => {
        let routerUrl = this.$router.resolve({
          name: 'DataCenterDetail',
          query: {
            id:item.esId,
            type:'project'
          }
        })
        window.open(routerUrl.href,'_blank');
      })
    },
    // 翻译
    transalte(item, index) {
     console.log('item',item);
    },
  },
  watch: {
    data() {
      this.getListData(this.data)
    },
    defaultTrans() {
      console.log(this.defaultTrans );
    },
    
    // 高亮模式
    highlightModeSettings: {
      deep: true,
      handler: function() {
        this.getListData(this.data)
      }
    },
    // 多选
    checkBoxList() {
      // this.$emit('checkBoxList', this.checkBoxList)
      this.$Bus.$emit('getDcCheckBoxlist',this.checkBoxList)
    },
    // 全选
    checkAllVal() {
      this.checkBoxList = this.checkAllVal ? this.listData : []
    },
  },

  beforeDestroy() {
    this.$Bus.$off('emptyText')
  }
}
</script>

<style lang="scss" scoped>
.list-wrap {
  position: relative;
  .list-a {
    position: relative;
    display: flex;
    // min-height: 240px;
    padding: 20px 0;
    border-left: 4px solid transparent;
    border-bottom: 1px solid $color2;
    box-sizing: border-box;
    background-color: $color2;
    &:hover {
      border-left-color: $mainColor;
      background-color: $color153;
    }
  }
  .list-checkbox {
    position: relative;
    top: 4px;
    left: 12px;
  }
  .mode-a {
    position: relative;
    flex: 1;
    min-width: 0;
    padding-left: 15px;
    padding-right: 10px;
    // margin-left: 34px;
    box-sizing: border-box;
    .title {
      position: relative;
      width: 100%;
      display: inline-flex;
      align-items: center;
      padding-left: 0;
      border-bottom: 0;
      margin-bottom: 15px;
      h4 {
        display: inline-flex;
        align-items: flex-end;
        width: calc(100% - 188px - 78px);
        line-height: 1.5em;
        margin-top: 0;
        margin-bottom: 0;
        .name {
          display: inline-block;
          margin-top: 0;
          margin-bottom: 0;
          // &:hover {
          //   color: $color141;
          // }
          span {
            min-height: 30px;
            line-height: 30px;
            margin-right: 14px;
            font-size: 18px;
            cursor: pointer;
            &.icon {
              display: inline-block;
              width: 24px;
              margin-right: 10px;
              text-align: center;
              font-weight: normal;
              font-size: 16px;
              vertical-align: top;
              color: $mainColor;
              cursor: pointer;
            }
            &.iconzhankai2 {
              font-size: 20px;
            }
            &.iconshoucang11 {}
            &.iconshoucang3 {
              color: $mainColor;
            }
          }
        }
      }
      button {
        padding: 4px 15px;
        border: 1px solid $color37;
        border-radius: 13px;
        color: $color141;
        background-color: transparent;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: $color141;
        }
      }
    }
    .list-main {
      position: relative;
      display: flex;
      width: 100%;
      // min-height: 200px;
      margin-bottom: 15px;
      .head-img, .no-img {
        position: relative;
        width: 150px;
        height: 200px;
        border: 1px solid $color2;
        cursor: pointer;
        .head-img-loading {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          height: 200px;
          background-color: $color62;
          .icon {
            display: inline-block;
            width: auto;
            height: auto;
            font-size: 30px;
            color: $color63;
          }
        }
        .no-img {
          border: 1px solid $color2;
          box-sizing: border-box;
          img {
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
      }
      .right {
        position: relative;
        flex: 1;
        min-width: 0;
        padding-left: 20px;
        padding-right: 10px;
        .info {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          list-style: none;
          li {
            position: relative;
            display: inline-flex;
            width: 50%;
            line-height: 24px;
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            span {
              display: inline-block;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &.tit {
                width: 87px;
                color: $color6;
              }
              &.content {
                flex: 1;
                color: $color158;
              }
            }
          }
        }
        .abs {
          line-height: 24px;
          margin: 5px 0;
          font-size: 12px;
          color: $color143;
        }
        .footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0;
          .left {
            flex: 1;
            span {
              position: relative;
              display: inline-block;
              margin-right: 24px;
              font-size: 12px;
              color: $color6;
              i {
                font-style: normal;
                color: $color1;
              }
            }
          }
          .tag {
            padding: 6px 10px;
            border-radius: 4px;
            margin: 0 5px;
            font-size: 12px;
            color: #fff;
            background-color: $mainColor;
            vertical-align: text-bottom;
          }
        }
      }
    }
  }
}
.tools-box {
  position: absolute;
  top: 0;
  right: 0;
  // width: 176px;
  padding-right: 10px;
  text-align: right;
  > span {
    display: inline-block;
    width: 78px;
    line-height: 26px;
    border: 1px solid $color141;
    border-radius: 30px;
    margin-left: 10px;
    text-align: center;
    font-size: 12px;
    color: $mainColor;
    background-color: transparent !important;
    cursor: pointer;
    &:nth-of-type(1) {
      margin-left: 0;
    }
    &.active {
      border-color: $mainColor;
      color: $color2;
      background-color: $mainColor !important;
    }
    &.assess {
      border-color: $mainColor !important;
      color: $color2;
      background-color: $mainColor !important;
    }
    &.archives {
      &:hover {
        border-color: $mainColor;
        color: $color2;
        background-color: $mainColor !important;
      }
    }
  }
}
.no-data {
  position: relative;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: $color6;
  background-color: $color2;
}
</style>